import React, { Component } from 'react';
import { View, Dimensions, StyleSheet, ScrollView } from 'react-native'
import { Container, Content, List, ListItem, Text, Icon, Spinner, Thumbnail,Body } from 'native-base'
import Collapsible from 'react-native-collapsible';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import course from '../../net/course';
import DepartmentInfomation from '../../db/coursedb/morecourse_department_table.js';
const { width, height } = Dimensions.get('window');

class department extends Component {

    constructor(props) {
        super(props);
        this.state = { departmentinfo: null };
    }
    async componentWillMount() {
        let departmentIn = new DepartmentInfomation();
        try {
            await departmentIn.createDepartmentInfoTable();
            let info = await departmentIn.queryDepartmentInfo();
            if (info != null && info.length > 0) {
                console.log('departmentIn1111111111');
                let outArray = JSON.parse(info.item(0).departmentvalue);
                console.log(outArray);
                this.setState({ departmentinfo: outArray });
                await departmentIn.closeDepartmentInfo();

            } else {
                console.log('departmentIn2222222222');
                let cs = new course();
                let outArray = await cs.get_department();
                this.setState({ departmentinfo: outArray });
                departmentIn.insertDepartmentInfo(JSON.stringify(outArray));
                await departmentIn.closeDepartmentInfo();
            }
        } catch (e) {
            console.log("error", e);
        }


    }
    render_content(l) {
        const { setDepartmentInfo } = this.props;
        return l.map((v, i) => {
            return (

                <View key={i}>
                    <ListItem style={StyleSheet.flatten(styles.mainList)}
                        button onPress={() => {
                            setDepartmentInfo({
                                type: 'GetDepartmentInfo',
                                payload: {
                                    departmentid: v.code,
                                    departmenttitle: v.name
                                }
                            });
                            this.props.screenProps.parentNavigation.dispatch('MoreCourseList');
                            this.props.screenProps.parentNavigation.navigate('MoreCourseList',{ title: v.name });
                        }} >
                        <Thumbnail square source={require('../../images/ccnu_logo.png')}
                            style={{ height: 32, width: 32 }} />
                        <Body>
                            <Text style={StyleSheet.flatten(styles.textStyle)}>{v.name}</Text>
                        </Body>
                    </ListItem>

                </View>

            );
        })
    }
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    render() {
        if (!this.state.departmentinfo) {
            return this.renderLoadingView();
        }
        return (
            <Content style={{ marginTop: 15 }}>
                <ScrollView ref={(scrollView) => { _scrollView = scrollView; }} style={StyleSheet.flatten(styles.ScrollView)}>
                    {this.render_content(this.state.departmentinfo)}
                </ScrollView>
            </Content>
        );
    }
}
const styles = StyleSheet.create({
    mainList: {
        height: 40,
        marginRight: 0,
        marginLeft: 0,
        // marginTop: 1,
        // paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    // mainList: {
    //     height: 45,
    //     marginRight: 0,
    //     marginLeft: 0,
    //     marginTop: 1,
    //     paddingBottom: 10,
    //     paddingLeft: 20,
    //     paddingRight: 20,
    //     backgroundColor: 'white',
    //     borderBottomWidth: 0.2,
    //     borderBottomColor: "#cac0c0",
    // },
    textStyle: {
        fontSize: 17,
        color: '#353535',
    },
    ScrollView: {
        height: 360,
    }
});
function mapStateToProps(state) {
    return {}
}

function mapDispatchToProps(dispatch) {
    return {
        setDepartmentInfo: (state) => dispatch(state)
    }
}

const PageDepartment = connect(
    mapStateToProps,
    mapDispatchToProps
)(department)
export default PageDepartment;